<template>
  <div class="home">
    <a-layout style="min-height: 100vh">
      <a-layout-sider v-model:collapsed="collapsed" collapsible>
        
        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
          <a-sub-menu key="sub1">
            <template #title>
              <span>
                <user-outlined />
                首页
              </span>
            </template>
            <a-menu-item key="1">
              <router-link to="/">仪表盘</router-link>
            </a-menu-item>
            <a-menu-item key="2"
              ><router-link to="/focus">焦点图管理</router-link></a-menu-item
            >
            <a-menu-item key="3"
              ><router-link to="/enterprise"
                >企业特色管理</router-link
              ></a-menu-item
            >
          </a-sub-menu>
          <a-menu-item key="sub2">
            <user-outlined />
            <router-link to="/aboutuser">关于我们</router-link>
          </a-menu-item>
          <a-sub-menu key="sub3">
            <template #title>
              <span>
                <user-outlined />

                产品列表
              </span>
            </template>
            <a-menu-item key="9" @click="$router.push('/administration')"
              >产品管理</a-menu-item
            >
          
            <a-menu-item key="10" @click="$router.push('/productadd')"
              >产品添加</a-menu-item
            >
            <a-menu-item key="11" @click="$router.push('/productclass')"
              >分类管理</a-menu-item
            >
          </a-sub-menu>
          <a-sub-menu key="sub4">
            <template #title>
              <span>
                <user-outlined />

                管理员
              </span>
            </template>
            <a-menu-item key="9" @click="$router.push('/strators')"
              >管理员</a-menu-item
            >
            <a-menu-item key="10" @click="$router.push('/addstrators')"
              >添加管理员</a-menu-item
            >
           
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>仪表盘</a-breadcrumb-item>
            <a-breadcrumb-item>首页</a-breadcrumb-item>
            <a-breadcrumb-item>{{ store.title }}</a-breadcrumb-item>
          </a-breadcrumb>

          <div class="div">
          
            <a-dropdown>
              <template #overlay>
                <a-menu @click="handleMenuClick">
                  <a-menu-item key="1"> 首页 </a-menu-item>
                  <a-menu-item key="2"> 退出登录 </a-menu-item>
                </a-menu>
              </template>
              <a-button>
                <RobotOutlined />
                <!-- <GithubFilled /> -->
                <DownOutlined />
              </a-button>
            </a-dropdown>
          </div>
        </a-layout-header>

        <a-layout-content style="margin: 0 16px">
          <!-- <tabnav></tabnav> -->
          <div class="tab">
            <a-tag
              v-for="(item, index) in data.list"
              :closable="item.path != '/home'"
              @click="$router.push(item.path)"
              :class="{ active: item.path == route.path }"
              @close.prevent="log(index)"
              >{{ item.title }}</a-tag
            >
          </div>

          <div
            :style="{ padding: '24px', background: '#fff', minHeight: '360px' }"
          >
            <router-view></router-view>
          </div>
        </a-layout-content>
        <a-layout-footer style="text-align: center"> liyabg </a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import {
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
  DownOutlined,
  GithubFilled,
  AppstoreTwoTone,
  RobotOutlined
} from "@ant-design/icons-vue";

import { defineComponent, ref, reactive, onMounted } from "vue";
import { appStore } from "../store/index";

import { useRouter, onBeforeRouteUpdate, useRoute } from "vue-router";
import { outlogin } from "../api/login_api";
import { notification } from "ant-design-vue";
const store: any = appStore();
const router = useRouter();
const route = useRoute();
store.USERIfo();
const collapsed = ref<boolean>(false);
const selectedKeys = ref<string[]>(["1"]);

//nav
const data: any = reactive({
  list: [
    {
      path: "/home",
      title: "仪表盘",
    },
  ],
});
onMounted(() => {
  addlist({ path: route.path, title: route.meta.title });
});
onBeforeRouteUpdate((to, from, next) => {
  addlist({ path: to.path, title: to.meta.title });
  next();
});

const addlist = (val: any) => {
  let index = data.list.findIndex((item: any) => item.path == val.path);
  if (index === -1) {
    data.list.push(val);
  }
};
const log = (index) => {
  data.list.splice(index, 1);
  router.push(data.list.at(-1));
};

//用户操作
const handleMenuClick = () => {
  outlogin().then((res) => {
    console.log(res);
    if (res.data.message == "ok") {
      store.$reset();
      router.push("/login");
      notification["success"]({
        message: "退出登录成功",
        description: "Log out successfully",
      });
    }
  });
};

//全屏
</script>

<style scoped lang="scss">
.anticon-menu-fold,
.anticon-menu-unfold {
  font-size: 25px;
}
.ant-layout-header {
  span {
    margin-left: 10px;
  }
}
.logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  // align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
}
.active {
  background: skyblue;
}
.ant-layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.anticon-github {
  font-size: 25px;
}
.anticon-appstore {
  font-size: 25px;
  margin-right: 10px;
}
</style>